<template>
  <div class="form_container">
    <!-- <img src="@/assets/bg.png" alt="" class="bg__png"> -->
    <div class="manage_tip">
      <span class="title">中装天如后台管理系统</span>
      <el-form
        :model="loginUser"
        status-icon
        :rules="rules"
        ref="loginForm"
        class="loginForm"
        label-width="70px"
      >
        <el-form-item label-width="36px" :rules="[
      { required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input autocomplete="off"  v-model="userName" placeholder="用户名"><template slot="prepend"><span class="el-icon-user"></span></template>
  </el-input>
        </el-form-item>
        <el-button v-if="step==1" type="primary" class="submit_btn" @click="getPhone()">获取手机号</el-button>
        <div v-if="step===2" class="send-text">
          点击按钮发送验证码到 {{hiddenMobile}}
        </div>
        <el-form-item v-if="step==2" label-width="36px">
          <div style="display:flex;align-items: center;">
            <el-input
            autocomplete="off"
            width="102px"
            v-model="code"
            placeholder="请输入验证码"
          >
          <template slot="prepend"><span class="el-icon-key"></span></template>
          </el-input>
          <a style="color:#fff !important" class="get_num " v-bind:class="{gray:wait_timer>0}"  @click='getMobileCode()'>{{ getMobileCodeText() }}</a>
          <!-- <el-button type="primary" @click="sendVerify('loginForm')">发送验证码</el-button> -->
          </div>
        </el-form-item>
        <el-button v-if="step==2" type="primary" class="submit_btn" @click="nextStep()">下一步</el-button>
        <el-form-item v-if="step==3" label-width="36px" :rules="[
      { required: true, message: '请输入新密码', trigger: 'blur' }]">
          <el-input
            autocomplete="off"
            :type="pwdType"
            v-model="password"
            placeholder="请输入新密码"
          >
          <template slot="prepend"><span class="el-icon-lock"></span></template>
          </el-input>
          <img v-if="pwdType =='password'" src="../../assets/show_p.png" @click="checkPassType(2)" class="pas" alt="">
          <img  v-if="pwdType =='text'" src="../../assets/hid_p.png" @click="checkPassType(1)" class="pas" alt="">
        </el-form-item>
        <el-form-item v-if="step==3" label-width="36px" :rules="[
      { required: true, message: '请确认密码', trigger: 'blur' }]">
          <el-input
            autocomplete="off"
            :type="pwdType"
            v-model="aginPSD"
            placeholder="请确认新密码"
          >
          <template slot="prepend"><span class="el-icon-lock"></span></template>
          </el-input>
        </el-form-item >
        <div class="forget">
          <!-- <el-button  class="forget-text" type="text" @click="goLogin()">直接登录?</el-button> -->
          <span class="forget-text" @click="goLogin()">直接登录?</span>
        </div>
          <el-button v-if="step==3" type="primary" id="keydown" class="submit_btn" @click="submitForm('loginForm')">确定修改</el-button>
      </el-form>
    </div>
    <div class="beian">
      <p @click="searchMobile()" style="color:rgba(86, 88, 90, 0.781)">mobile</p>
      <p><a  target="_blank" style="color:#646464;text-decoration: none;" href="https://beian.miit.gov.cn/">蜀ICP备18028200号-1</a></p>
    </div>
  </div>
</template>

<script>
import request from "@/tools/request";
export default {
  name: "Register",
  data() {
    return {
      pwdType: 'password',
      mobile:'',
      hiddenMobile: '',
      code: '',
      wait_timer:false,
      step: 1,
      userName: '',
      password: '',
      aginPSD: '',
      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        loginPwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 5, max: 30, message: "长度在5到30个字符之间", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    goLogin(){
      this.$router.push("/login", () => {});
    },
    searchMobile(){
      this.$router.push("/mobile", () => {});
    },
    checkPassType(type){
      if(type==1){
        this.pwdType = 'password'
      }else{
        this.pwdType = 'text'
      }
    },
    async nextStep(){
      const res = await request({
        url: "/forget/check",
        method: "POST",
        data: {
          userName: this.userName,
          code: this.code
        }
      })
      if(res.code ==0){
        this.step =3
      }else{
        this.$message.error(res.msg)
      }
    },
    async submitForm() {
      if(!this.password){
        this.$message.error('请输入新密码')
        return 
      }
      if(this.password != this.aginPSD){
        this.$message.error('两次密码不一致，请重新输入')
        return 
      }
      if(!this.userName){
        this.$message.error('请输入用户名')
        return 
      }
      const res = await request({
        url: "/forget/modify",
        method: "POST",
        data: {
          userName: this.userName,
          password: this.password
        }
      })
      if(res.code==0){
        this.$router.push("/login", () => {});
      }else{
        this.$message.error(res.msg)
      }
      
    },
    isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },
    async getPhone(){
      if(!this.userName){
        this.$message.error('请输入登录名')
        return false
      }
      const res = await request({
        url: `/forget/getPhone?userName=${this.userName}`,
        method: "GET",
      })
      if(res.phone){
        this.step = 2
        this.mobile = res.phone
        this.hiddenMobile = res.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
      }
    },
    async getVerify() {
       const res = await request({
        url: "/forget/send",
        method: "POST",
        data: this.mobile
      })
      // this.chapt = res.img
    },
    getMobileCode:function(){
            if (this.wait_timer > 0) {
              console.log(1)
                return false;
            }
            if (!this.mobile) {
                console.log('手机号不能为空');
                return false;
            }
            if(!/^1[3|4|5|7|8|9]\d{9}$/.test(this.mobile)){
                console.log('手机号格式不正确');
                return false;
            }
            
            this.wait_timer = 59;
            var that = this;
            var timer_interval = setInterval(function(){
                if(that.wait_timer > 0){
                    that.wait_timer -- ;
                }else{
                    clearInterval(timer_interval);
                }
            },1000);
            
            this.getVerify()
               
        },
    getMobileCodeText:function(){
        if(this.wait_timer > 0){
            return this.wait_timer+'s后获取';
        }
        
        if(this.wait_timer === 0){
            return '重新获取';
        }
        
        if(this.wait_timer === false){
            return '获取验证码';
        }
        
    },
  },
  created () {
  },
  mounted(){
    
  },

}
</script>


<style scoped>
.el-form-item{
  width: 90%;
  position: relative;
}
.form_container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../../assets/bg1.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.el-form-item__content {

  /* margin: auto !important; */
}
.bg__png {
  /* position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    transform:  scale(1);
    border:none; */
    /* border-radius: 6px; */
    /* display:table-cell */
}
.chapt {
  padding: 0 5px;
  width: 90px;
  height: 39px;
}
  @media screen and (min-width: 840px) {
    .manage_tip {
      width: 370px;
    }
  }
.manage_tip {
  height: 210px;
  position: absolute;
  top: 10%;
  left: 50%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
  margin-left: -177px;
  z-index: 2;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #ffffff;
}

.loginForm {
  margin-top: 20px;
  background-color: white;
  padding: 18px;
  border-radius: 5px;
  /* box-shadow: 0px 5px 10px #cccccc; */
  background: linear-gradient(68deg,rgb(235 245 255 / 60%),hsl(0deg 0% 100% / 60%));
  /* background: linear-gradient(68deg,rgb(238 245 255 / 60%),hsl(0deg 0% 100% / 60%)); */
  /* box-shadow: 16px 16px 32px rgb(174 174 192 / 80%), -16px -16px 48px hsl(0deg 0% 100% / 62%); */
  /* box-shadow: 11px 2px 16px rgb(196 217 221 / 53%), -16px -16px 48px hsl(0deg 0% 100% / 52%); */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(30px);
}
.el-form-item__label{
 font-size: 12px;
}
.submit_btn {
  width: 80%;


  
}
.chenck-pass {
  /*  margin-bottom: 10px;
    margin-left: 76%;*/
}
.beian {
  position: absolute;
  bottom: 20px;
  right: 0;
  font-size: 14px;
  display: flex;
  width: 50%;
  color: #878787;
  justify-content: space-between;
}

/* 倒计时 */
input{
    font-size: 16px;
    padding: 4px;
    -webkit-tap-highlight-color:transparent;
    outline-style: none;
    list-style: none;
}
.get_num{
  width: 112px;
  height: 33px;
  font-size: 13px;
  color: white;
  display: block;
  background: #3bc987;
  border-radius: 4px;
  text-align: center;
  line-height: 33px;
  /* margin-top: 4px; */
  margin-left: 2px;
  cursor: pointer;
}
a{
  
}
.get_num.gray{
    background: #c8c8c8;
}
.forget{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  font-size: 15px;
  margin: 16px;
}
.forget-text{
  color: #0473e9;
  cursor: pointer;
}
.send-text {
  margin-bottom: 10px;
    color: #246095;
}
.pas{
  position: absolute;
    right: 9px;
    top: 4px;
}
</style>